.content {
  width: 98vw;
  margin: 290px 0 0 0;
  padding: 0 1vw;
  column-count: 2;
  -moz-column-gap: 1vw;
  /* Firefox */
  -webkit-column-gap: 1vw;
  /* Safari and Chrome */
  column-gap: 1vw;
  // background-color: #eee;
  z-index: 1;

  .card {
    width: 96%;
    margin: 4vw 1vw;
    overflow: hidden;
    background-color: white;
    break-inside: avoid;
    border-radius: 2vw;
    column-gap: 10vw;
    box-shadow: 0 0 5px 5px #eee;

    img {
      display: block;
      width: 100%;
      border-radius: 3vw 3vw 0 0;
      margin: 0 auto
    }

    .pdown {
      width: 45vw;
      font-size: 10vw;

      .title {
        color: #111;
        font-size: 4vw;
        font-weight: bold;
        width: 90%;
        padding: 1vw;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .rate {
        margin: 2vw;
        padding: 1vw;
        width: 90%;
        text-align: left;
        font-size: 3vw;
        color: #222;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
}

@media screen and (max-width: 414px) {
  .container {
    column-count: 2;
    width: 100%;
    box-sizing: border-box;
    padding: 0;
  }
}